<script lang="tsx">
/**
 * 表单弹窗
 */
export default {
  name: "dialog-sheet-form"
}
</script>

<script lang="tsx" setup>
import {ref, defineProps, watch, nextTick} from "vue"
import DialogSheetFormManager from "./dialog-sheet-form-manager.ts"
import SheetForm from "../../components/sheet-form/index.vue"
import {ElMessageBox} from "element-plus"
import {cloneDeep} from "lodash";

/**
 * 定义props
 */
const props = defineProps<{
  dialogSheetFormModel: DialogSheetFormManager<any>;
  reflections?: any;
}>()

/**
 * 定义emit
 */
const emit = defineEmits<{
  (event: "submit", params: any): void;
}>()

/**
 * 弹窗模型
 */
const dialogSheetFormModel = ref<DialogSheetFormManager<any>>()

/**
 * 监听
 */
watch(() => props.dialogSheetFormModel, function (newValue: any) {
  if (newValue) {
    dialogSheetFormModel.value = newValue
  }
}, {
  deep: true,
  immediate: true
})

/**
 * 显示表单
 */
const sheetFormRef = ref()
const visible = ref(false)
const addForm = () => {
  visible.value = true
  nextTick(() => {
    sheetFormRef.value.initFormData()
  })
}
const editForm = () => {
  visible.value = true
}
const close = () => {
  visible.value = false
}

/**
 * 获取表单数据
 */
const getFormData = () => {
  return sheetFormRef.value.getFormData()
}

/**
 * 设置表单数据
 */
const setFormData = (data: any) => {
  const deepData = cloneDeep(data)
  sheetFormRef.value.setFormData(deepData)
}

/**
 * 提交表单
 */
const handleSubmit = async () => {
  await ElMessageBox.confirm("是否确认提交？", "提交", {
    type: "success"
  })
  const formData = await getFormData()
  emit("submit", formData)
}

/**
 * 暴露
 */
defineExpose({
  addForm,
  editForm,
  getFormData,
  setFormData,
  handleSubmit,
  close
})
</script>

<template>
  <div v-if="visible" class="dialog-sheet-form">
    <el-dialog v-model="visible" :before-close="close" :title="dialogSheetFormModel?.title"
               :width="dialogSheetFormModel?.width">
      <div v-if="dialogSheetFormModel?.sheetForm" class="form-content">
        <SheetForm ref="sheetFormRef" :SheetFormModel="dialogSheetFormModel?.sheetForm"
                   :reflections="props.reflections"/>
      </div>
      <div class="form-bottom">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.form-bottom {
  text-align: center;
}
</style>